<template>
    <el-image-viewer v-if="showPreviewImg" :url-list="props.imgSrcList" show-progress @close="handleClose">
        <template #error>
            <img :src="errImg" alt="图片加载失败" />
        </template>
    </el-image-viewer>
</template>

<script setup lang="ts">
import errImg from '@/assets/img/common/pictureError.png';

// 定义组件的model
const showPreviewImg = defineModel('showPreviewImg', { type: Boolean, default: false });
// 定义组件的props
const props = defineProps<{ imgSrcList: string[] }>();

// 关闭图片预览
const handleClose = () => {
    showPreviewImg.value = false;
};
</script>

<style scoped>
.el-image {
    cursor: pointer;
}
</style>
